<template >
  <el-main>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item class="font-bold">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!-- 搜索框 -->
    <el-row :gutter="10" v-model="formInline">
      <span class="ml-2.5 mt-1">搜索：</span>
      <el-col :span="6">
        <el-input type="text" input v-model="formInline.orderId" placeholder="请输入订单编号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input type="text" input v-model="formInline.userName" placeholder="请输入用户名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" plain size="medium" @click="getData(formInline)">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="mt-4">
      <el-table :data="tableData" style="font-size: 12px;">
        <el-table-column prop="orderId" label="订单编号" width="100"></el-table-column>
        <el-table-column prop="address" label="收货地址" width="120"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="110"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="90"></el-table-column>
        <el-table-column prop="consignee" label="收货人" width="90"></el-table-column>
        <el-table-column prop="productName" label="商品名称" width="90"></el-table-column>
        <el-table-column prop="specName" label="商品规格" width="80"></el-table-column>
        <el-table-column prop="price" label="实付" width="60"></el-table-column>
        <el-table-column prop="amount" label="数量" width="50"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
        <el-table-column prop="sendTime" label="发货时间" width="100"></el-table-column>
        <el-table-column prop="receiptTime" label="收货时间" width="100"></el-table-column>
        <el-table-column label="状态" width="90">
          <template #default="scope">
            <el-button type="danger" size="small" v-if="scope.row.sendTime == null" plain>待发货</el-button>
            <el-button type="primary" size="small" v-else-if="scope.row.receiptTime == null" plain>已发货</el-button>
            <el-button type="success" size="small" v-else plain>已收货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="text-center mt-4" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.pageNum" :page-sizes="[10, 20, 50]" :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="query.total">
      </el-pagination>
    </div>
  </el-main>
</template>
<script >
import { ArrowRight } from '@element-plus/icons-vue'
import axios from 'axios'
export default {
  data() {
    return {
      formInline: {// 搜索栏
        userName: '',
        orderId: '',
      },
      tableData: [],// 数据接收
      query: {//分页数据
        pageNum: 1,
        pageSize: 10,
        total: 5,
      }
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/selectOrdersByQuery',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
          userName: this.formInline.userName,
          orderId: this.formInline.orderId,
          limit: this.query.pageSize,
          page: this.query.pageNum,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.ordersList
          this.query.total = res.data.data.total
        }
      } )
    },
    //切换当前页显示的数据条数，执行方法
    handleSizeChange( val ) {
      this.query.pageSize = val
      this.getData()
    },
    //切换页数，执行方法
    handleCurrentChange( val ) {
      this.query.pageNum = val
      this.getData()
    }
  }
};
</script>
<style scoped></style>